<template>
    <div class="continer">
        <div class="topbox">
            <el-button type="primary" icon="el-icon-plus" @click="btnAdd">添加区域</el-button>
            <el-button icon="el-icon-refresh" @click="getList">刷新列表</el-button>
        </div>
        <el-table :data="listData" row-key="number" style="width: 100%" stripe border>
            <el-table-column label="区域名称" prop="name"></el-table-column>
            <el-table-column label="区域编码" prop="number"></el-table-column>
            <el-table-column label="区域类型" prop="type"></el-table-column>
            <el-table-column label="备注" prop="note"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleAdd(scope.$index, scope.row)"
                    >添加下级区域</el-button>
                    <!--<el-button type="text" size="mini" @click="handleDetail(scope.$index, scope.row)">查看</el-button>-->
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--       修改区域         -->
        <el-dialog
            title="修改区域"
            :visible.sync="showEdit"
            :beforeClose="(close)=>{clearForm('editForm',close)}"
            :closeOnClickModal="false"
        >
            <el-form :model="showEditData" label-width="80px" :rules="formRules" ref="editForm">
                <el-form-item label="上级区域" prop="pid">
                    <el-select placeholder="选择上级区域" v-model="showEditData.pid" style="width:100%;">
                        <el-option
                            v-for="item in tree"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                            <span style="float: left">
                                <span v-html="item.html"></span>
                                {{ item.name }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域名称" prop="name">
                    <el-input v-model="showEditData.name"></el-input>
                </el-form-item>
                <el-form-item label="区域编码" prop="number">
                    <el-input v-model="showEditData.number"></el-input>
                </el-form-item>
                <el-form-item label="区域类型" prop="type">
                    <el-select
                        v-model="showEditData.type"
                        placeholder="请选择区域类型"
                        style="width:100%;"
                    >
                        <el-option v-for="(value,key) in areaType" :label="value" :key="key" :value="key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="showEditData.note"></el-input>
                </el-form-item>
                <el-form-item class="txt_r">
                    <el-button type="primary" @click="editSubmit">立即修改</el-button>
                    <el-button @click="()=>{clearForm('editForm','showEdit')}">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--        添加区域        -->
        <el-dialog
            title="添加区域"
            :visible.sync="showAdd"
            :beforeClose="(close)=>{clearForm('addForm',close)}"
            :closeOnClickModal="false"
        >
            <el-form :model="addData" label-width="80px" :rules="formRules" ref="addForm">
                <el-form-item label="上级区域" prop="pid">
                    <el-select placeholder="选择上级区域" v-model="addData.pid" style="width:100%;">
                        <el-option
                            v-for="item in tree"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                            <span style="float: left">
                                <span v-html="item.html"></span>
                                {{ item.name }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域名称" prop="name">
                    <el-input v-model="addData.name"></el-input>
                </el-form-item>
                <el-form-item label="区域编码" prop="number">
                    <el-input v-model="addData.number"></el-input>
                </el-form-item>
                <el-form-item label="区域类型" prop="type">
                    <el-select v-model="addData.type" placeholder="请选择区域类型" style="width:100%;">
                        <el-option v-for="(value,key) in areaType" :key="key" :label="value" :value="key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="addData.note"></el-input>
                </el-form-item>
                <el-form-item class="txt_r">
                    <el-button type="primary" @click="addSubmit">立即添加</el-button>
                    <el-button @click="()=>{clearForm('addForm','showAdd')}">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--        添加下级区域      -->
        <el-dialog
            title="添加下级区域"
            :visible.sync="showSubAdd"
            :beforeClose="(close)=>{clearForm('subAddForm',close)}"
            :closeOnClickModal="false"
        >
            <el-form :model="subAddData" label-width="80px" :rules="formRules" ref="subAddForm">
                <el-form-item label="上级区域">
                    <el-select
                        placeholder="选择上级区域"
                        v-model="subAddData.pid"
                        style="width:100%;"
                        disabled
                    >
                        <el-option
                            v-for="item in tree"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                            <span style="float: left">
                                <span v-html="item.html"></span>
                                {{ item.name }}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域名称" prop="name">
                    <el-input v-model="subAddData.name"></el-input>
                </el-form-item>
                <el-form-item label="区域编码" prop="number">
                    <el-input v-model="subAddData.number"></el-input>
                </el-form-item>
                <el-form-item label="区域类型" prop="type">
                    <el-select v-model="subAddData.type" placeholder="请选择区域类型" style="width:100%;">
                        <el-option v-for="(value,key) in areaType" :key="key" :label="value" :value="key"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="subAddData.note"></el-input>
                </el-form-item>
                <el-form-item class="txt_r">
                    <el-button type="primary" @click="subAddSubmit">立即添加</el-button>
                    <el-button @click="()=>{clearForm('subAddForm','showSubAdd')}">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import * as apis from "../../api/system/sysArea";
export default {
    name: "sysArea",
    data() {
        return {
            //区域类型
            areaType: {},
            //列表
            listData: [],
            //树形图
            tree: [],
            defaultProps: { children: "children", label: "name" },
            showTree: false,
            //显示
            //showDetail:false,
            showEdit: false,
            showAdd: false,
            showSubAdd: false,
            //详情修改数据
            //showDetailData:{},
            showEditData: {},
            //添加数据
            addData: {},
            subAddData: {},
            // 表单验证
            formRules: {
                name: [
                    {
                        required: true,
                        message: "请输入区域名称",
                        trigger: "blur"
                    }
                ],
                pid: [
                    {
                        required: true,
                        message: "请选择上级区域",
                        trigger: "change"
                    }
                ],
                number: [
                    {
                        required: true,
                        message: "请输入区域编码",
                        trigger: "blur"
                    },
                    { pattern: /^\d+$/, message: "请输入数字", trigger: "blur" }
                ],
                type: [
                    {
                        required: true,
                        message: "请选择区域类型",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    methods: {
        // 点击添加下级区域
        handleAdd(index, row) {
            this.showSubAdd = true;
            this.subAddData = { pid: row.id };
        },
        // 提交添加下级区域
        subAddSubmit() {
            this.$refs["subAddForm"].validate(valid => {
                if (valid) {
                    let ad = this.subAddData;
                    apis.addArea({
                        id: ad.id,
                        name: ad.name,
                        number: ad.number,
                        type: ad.type,
                        note: ad.note,
                        pid: ad.pid
                    })
                        .then(data => {
                            if (data.code) {
                                this.$message({
                                    type: "error",
                                    message: data.message
                                });
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "添加成功"
                            });
                            this.clearForm("subAddForm", "showSubAdd");
                            this.getList();
                            this.getTree();
                        })
                        .catch(() => {
                            this.$message({
                                type: "error",
                                message: "添加失败"
                            });
                        });
                }
            });
        },
        //点击添加
        btnAdd() {
            this.showAdd = true;
        },
        // 提交添加
        addSubmit() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    let ad = this.addData;
                    apis.addArea({
                        id: ad.id,
                        name: ad.name,
                        number: ad.number,
                        type: ad.type,
                        note: ad.note,
                        pid: ad.pid
                    })
                        .then(data => {
                            if (data.code) {
                                this.$message({
                                    type: "error",
                                    message: data.message
                                });
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "添加成功"
                            });
                            this.clearForm("addForm", "showAdd");
                            this.getList();
                            this.getTree();
                        })
                        .catch(() => {
                            this.$message({
                                type: "error",
                                message: "添加失败"
                            });
                        });
                }
            });
        },
        // 点击修改
        handleEdit(index, row) {
            this.showEdit = true;
            this.showEditData = JSON.parse(JSON.stringify(row));
            for (let i in this.areaType) {
                if (this.areaType[i] == this.showEditData.type) {
                    this.showEditData.type = i;
                    break;
                }
            }
        },
        // 提交修改
        editSubmit() {
            this.$refs["editForm"].validate(valid => {
                if (valid) {
                    let ed = this.showEditData;
                    apis.editArea({
                        id: ed.id,
                        name: ed.name,
                        number: ed.number,
                        type: ed.type,
                        note: ed.note,
                        pid: ed.pid
                    })
                        .then(data => {
                            if (data.code) {
                                this.$message({
                                    type: "error",
                                    message: data.message
                                });
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "修改成功"
                            });
                            this.clearForm("editForm", "showEdit");
                            this.getList();
                        })
                        .catch(() => {
                            this.$message({
                                type: "error",
                                message: "修改失败"
                            });
                        });
                }
            });
        },
        // 点击查看
        handleDetail(index, row) {
            this.showDetail = true;
            this.showDetailData = row;
        },
        // 删除
        handleDelete(id, obj) {
            this.$confirm("确定删除该区域吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    apis.deleteArea("id=" + obj.id)
                        .then(data => {
                            if (data.code) {
                                this.$message({
                                    type: "error",
                                    message: data.message
                                });
                                return;
                            }
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.getList();
                        })
                        .catch(() => {
                            this.$message({
                                type: "error",
                                message: "删除失败!"
                            });
                        });
                })
                .catch(() => {});
        },
        // 获取区域类型
        getType() {
            apis.getType().then(data => {
                if (data.code) {
                    return false;
                }
                this.areaType = data.data;
            });
        },
        // 获取列表
        getList() {
            apis.getAreaList()
                .then(data => {
                    if (data.code) {
                        this.$message({ type: "error", message: data.message });
                        return;
                    }
                    let list = data.data.list;
                    this.listData = list;
                })
                .catch(() => {
                    this.$message({ type: "error", message: "获取数据失败!" });
                });
        },
        // 获取树
        getTree() {
            apis.getTree().then(data => {
                if (data.code) {
                    return;
                }
                let list = data.data.list;
                list.unshift({
                    id: 0,
                    html: "",
                    level: 0,
                    name: "顶级"
                });
                this.tree = list;
            });
        },
        // 清空表单  name: 表单rel名称，close：关闭方法/显示属性
        clearForm(name, close) {
            if (this.$refs[name]) {
                this.$refs[name].resetFields();
            }
            if (typeof close == "function") {
                close();
            } else {
                this[close] = false;
            }
        }
    },
    created() {
        this.getList();
        this.getType();
        this.getTree();
    }
};
</script>

<style scoped>
.txt_r {
    text-align: right;
}
.topbox {
    margin-bottom: 20px;
}
</style>
